<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" href="./css/jiazai.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/history.css"/>
    <title>历史记录</title>
</head>

<body>
    <div id='app'>

        <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->
        
        <!-- 赛选框 -->
        <div id='mask' v-if='offXuan'></div>
        <transition enter-active-class='animated fadeInUp' leave-active-class='animated fadeOutDown'>
            <div class='mask-content' v-if='offXuan'>
                <div class='xuan-con'>
                    <div class='dis-spa' v-for="(val,index) in filter" :key='index'>
                        <span @tap='changCurr(info)' v-for="(info,indexinfo) in val" :key='indexinfo'  :style="{'opacity':info.name?'1':'0','background':info.id==curr.id?'#1e58ca':'','color':info.id==curr.id?'white':''}" v-text='info.name'>全部</span>
                    </div>
                </div>
                <div class='close-mask' @tap='offXuan=false;'>取消</div>
            </div>
        </transition>
        <!-- 赛选框 -->
       
        <div id="com-tit" class='dis-spa'>
        	<div class='cont'>
        		<p class='menu dis-start' @tap="_close();">
	        		<img src="img/back-white.svg" style="width: 22px;height: 22px;" />
        		</p>
        	</div>
        	<div>历史记录</div>
        	<div class='cont' style="opacity: 0;">1</div>
        </div>
        
        <div id="content-wrap">
			<div>
	        	<div>
		        	<div class="profit-history">
		        		<div class="his-list">
		        			<h5>买入总额</h5>
		        			<div class="dis-spa oth-money">
		        				<p><span v-text='buyTotal.toFixed(2)'>0.00</span><span>USDT</span></p>
		        				<p></p>
		        				<p><span v-text='(buyTotal*price).toFixed(2)'>0.00</span><span>CNY</span></p>
		        			</div>
		        		</div>
		        		<div class="his-list">
		        			<h5>卖出总额</h5>
		        			<div class="dis-spa oth-money">
		        				<p><span v-text='sellTotal.toFixed(2)'>0.00</span><span>USDT</span></p>
		        				<p></p>
		        				<p><span v-text='(sellTotal*price).toFixed(2)'>0.00</span><span>CNY</span></p>
		        			</div>
		        		</div>
		        		<div class="his-list">
		        			<h5>今日手续费</h5>
		        			<div class="dis-spa oth-money">
		        				<p><span v-text='totalFee.toFixed(2)'>0.00</span><span>USDT</span></p>
		        				<p></p>
		        				<p><span v-text='(totalFee*price).toFixed(2)'>0.00</span><span>CNY</span></p>
		        			</div>
		        		</div>
		        	</div>
		        	<div class="gua-history">
		        		<h2 class='dis-spa'>
		        			<span>挂单记录</span>
		        			<span @tap='offXuan=true'>筛选</span>
		        		</h2>
		        		<div id="more">
							<div class="list-wrap" v-if='list.length'>
			        			<div class="list-info" v-for="(val,index) in list" :key='index'>
			        				<p class='dis-spa list-coins-name'><span>{{curr.name}}/{{curr.tradename}}</span><span v-text="String(val.mold)=='0'?'卖出':'买入'" :style="{'color':String(val.mold)=='0'?'red':''}">---</span></p>
			        				<div class="dis-spa list-price">
			        					<p><span>单价：</span><span v-text='val.price'>14554.00</span><span>USDT</span></p>
			        					<span>已成交</span>
			        				</div>
			        				<div class="dis-spa list-count">
			        					<p><span>数量：</span><span v-text='val.num'>14554.00</span></p>
			        					<span v-text="_date(val.addtime)">2018/02/07 15:02:53</span>
			        				</div>
			        				<p class='line-ani' id='line1' :style="{'background':String(val.mold)=='0'?'red':''}"></p>
			        			</div>
			        		</div>
			        		<div class='dis-spa gua-no-history' v-else>
			        			<img src="img/no-gua.png" style="width: 60%;height: auto;"/>
			        			<p>你还没有挂单哦 ~ ~</p>
			        		</div>
		        		</div>
	        		</div>
	        	</div>
			</div>
        </div>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    	mui.init({
			pullRefresh: {
				container: '#content-wrap',
				up: {
					contentrefresh: '正在加载...',
					contentnomore: "暂无更多",
					auto: true, //可选,默认false.自动上拉加载一次
					callback: function(){
						app.$data.page++;
						app.his();
					}
				}
			}
		});
        var app = new Vue({
            el: '#app',
            data: {
                //加载动画
                jiazai: false,
                page:0,
                //赛选框
                offXuan:false,
                //要进行赛选的币种
                filter:[[{
		            "id":0,
		            "name":""
		        }]],
                //历史list
                list:[{
		            "price":0,
		            "num":0,
		            "mold":0,
		            "addtime":1550730694
		        }],
                //当前兑换币种
                curr:{
                	"name":"",
        			"tradename":""
        		},
                //当前选择币种id
                id:'',
                //买入总额
                buyTotal:0,
                //卖出总额
                sellTotal:0,
                //今日手续费
                totalFee:0,
                //usdt和人民币之间的汇率
                price:6.5
            },
            watch:{
            	id:function(val){
            		mui("#content-wrap").pullRefresh().refresh(true);
            		this.page=1;
            		this.his();
            	},
            },
            created:function(){
//          	this.page++;
//						this.his();
            },
            methods: {
            	his:function(){
	            	var This=this;
	            	if(this.page==1){
	            		This.jiazai=true;
	            	}
	        		HTTP.post(HISTORYTRAN,{
	        			pageindex:This.page,
	        			id:This.id
	        		},function(data){
	        			This.jiazai=false;
	        			if(String(data.status)=='1'){
	        				if(data.list.length<10){
	        					mui('#content-wrap').pullRefresh().endPullupToRefresh(true);
	        				}else{
	        					mui('#content-wrap').pullRefresh().endPullupToRefresh(false);
	        				}
		        			if(This.page==1){
		        				This.list=data.list;
		        			}else{
		        				for(var k=0;k<data.list.length;k++){
		        					This.list.push(data.list[k]);
		        				}
		        			}
		        			This.buyTotal=data.buyTotal;
		        			This.sellTotal=data.sellTotal;
		        			This.totalFee=data.totalFee;
		        			This.price=data.price;
		        			This.$nextTick(function(){
			            		setTimeout(function(){
			            			$('.line-ani').css('right','0%');
			            		},500);
			            	});
			            	if(This.filter[0][0].id==0){
			            		This.filter=[];
			            		This.curr=data.coinprice;
			            		var type = data.coinPrices;
	                            var ch = [];
	                            for (var i = 0; i < type.length; i++) {
	                                if (i % 3 == 0 && i >= 3) {
	                                    This.filter.push(ch);
	                                    ch = [];
	                                    ch.push(type[i]);
	                                } else {
	                                    ch.push(type[i]);
	                                }
	                            }
	                            for (var j = ch.length; j < 3; j++) {
	                                ch.push({
	                                    name: ''
	                                });
	                            }
	                            This.filter.push(ch);
			            	}
	        			}else{
	        				_toast(data.msg);
	        				setTimeout(function(){
	        					_close();
	        				},1200);
	        			}
					});
            	},
            	//赛选
            	changCurr:function(val){
            		this.id=val.id;
            		this.curr=val;
            		this.offXuan=false;
            	}
            }
        });
        
    </script>
</body>

</html>